<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ontospace - Ontology Workspace</title>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.jstree.js"></script>
<script type="text/javascript" src="lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="Ontospace_files/ontWorkspace.js"></script>
<script type="text/javascript">
var unSaved = false;
var ontJson = {
        "data" : [
                  {
                      "data" : "Anode3",
                      "attr" : {"rel" : "root"},
                      "metadata" : {
                    	  "nodeName" : "Anode3",
                    	  "nodeDef" : "This is the definition of Anode3",
                    	  "nodeID" : "SAM00006",
                          "Xref" : "Xref_Anode"
                      },
                      "children" : [
                          {
                              "data" : "SubnodeA",
                              "attr" : {"rel" : "isa"},
                              "metadata" : {
                            	  "nodeName" : "SubnodeA",
                            	  "nodeDef" : "Hello, SubnodeA",
                            	  "nodeID" : "SSO57867",
                                  "Xref" : "Xref_SubnodeA"
                              }
                          }, {
                              "data" : "Tomcat",
                              "attr" : {"rel" : "isa"},
                              "metadata" : {
                            	  "nodeName" : "Tomcat",
                            	  "nodeDef" : "Miao...",
                            	  "nodeID" : "HUY623727",
                                  "Xref" : "Xref_Tomcat"
                              }
                          },{
                              "data" : "Jerrymouse",
                              "attr" : {"rel" : "isa"},
                              "metadata" : {
                            	  "nodeName" : "Jerrymouse",
                            	  "nodeDef" : "Ci...",
                            	  "nodeID" : "EWQ22334",
                                  "Xref" : "Xref_Jerrymouse"
                              }
                          }
                      ]
                  },
                  {
                      "data" : "Bnode2",
                      "attr" : {"rel" : "root"},
                      "metadata" : {
                          "nodeName" : "Bnode2",
                          "nodeDef" : "The return of Bnode",
                          "nodeID" : "GFD787878",
                          "Xref" : "Xref_Bnode"
                      }
                  }      
              ]
          };
$(function(){
	$("#newOnt").click(function(){
		ontJson.data.splice(0,1);
		$("#ontTree").jstree("refresh");
	});
	$("#searchNode").keypress(function(evt){
		if(evt.keyCode == 13) {
			$("#ontTree").jstree("search", this.value);
		}
	});
	$("#addNode").click(function(){
		$("#ontTree").jstree("create");
		unSaved = true;
	});
	$("#removeNode").click(function(){
		$("#ontTree").jstree("remove");
		unSaved = true;
	});
    $("#ontTree").jstree({
    	"themes" : {
    		"theme" : "classic"
    	},
    	"ui" : {
    		"selected_parent_close" : false,
    		"select_prev_on_delete" : false
    	},
    	"json_data" : ontJson,
    	"contextmenu" : {
    		"select_node" : true,
    		"show_at_node" : false
    	},
    	"types" : {
    		"valid_children" : ["root"],
    		"types" : {
    			"root" : {
    				"valid_children" : ["isa"],
    				"icon" : {
    					"image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png"
    				}
    			},
    			"isa" : {
    				"valid_children" : ["isa"],
    				"icon" : {
    					"image" : "http://bioportal.bioontology.org/images/is_a.gif"
    				}
    			}
    		}
    	},
    	"plugins" : ["themes", "ui", "json_data", "crrm", "hotkeys", "dnd", "search", "contextmenu", "types"]
    });
    $("#ontTree").bind(
    	    "select_node.jstree", function(evt, data){
    	    	$("#nodeName").html(data.inst.get_json()[0].metadata.nodeName);
    	    	$("#nodeDef").html(data.inst.get_json()[0].metadata.nodeDef);
    	    	$("#nodeID").html(data.inst.get_json()[0].metadata.nodeID);
    	    }
    );
});
</script>
</head>
<body>
    <input type="button" id="newOnt" value="New" accesskey="n" />
    <input type="button" value="Open" accesskey="o" />
    <input type="button" value="Save" accesskey="s" />
    <hr/>
    
    <span id="ontName">New Ontology</span>
    <input type="button" value="Summary" />
    <div>
        <div id="ontTreePanel" style="width:300px;height:450px;border-style:solid;border-width:1px;float:left">
            <input id="searchNode" type="text" />
            <input id="addNode" type="button" value="Add" />
            <input id="removeNode" type="button" value="Remove" />
            <hr/>
            <div id="ontTree"></div>
        </div>
        <div id="nodeTablePanel" style="width:700px;height:450px;border-style:solid;border-width:1px;float:left;margin-left:10px">
            <table id="nodeTable">
                <tr>
                    <td>Name</td><td id="nodeName"></td>
                </tr>
                <tr>
                    <td>Definition</td><td id="nodeDef"></td>
                </tr>
                <tr>
                    <td>ID</td><td id="nodeID"></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>